<template>
	<view id="app">
		<view class="header-add">
			<text class="header-text">添加银行卡</text>
		</view>
		<view class="header-info">
			<text class="header-infotext">翔瑞金融钱包保障您的信息安全</text>
		</view>
		<view class="header-card">
			<text class="header-wrcard">银行卡号</text>
			<text class="header-wrcard">支持的银行</text>
		</view>
		<view class="header-inp">
			<input type="text" value="" class="imp-input" placeholder="请输入您的银行卡号" />
		</view>
		<button type="default" class="bankBtn">验证银行卡号</button>
		<text class="chose">推荐选择</text>
		<view class="bindCard">
			<view class="Card-text">
				<view class="Card-blound">
					<text class="Card-blound-text">快速绑卡，无需手动输入卡号</text>
				</view>
				<view class="Card-cooperate">
					<text class="Card-cooperate-text">已和以下银行合作</text>
				</view>
			</view>
			<view class="Card-bandID">
				<view class="Card-bandID-box">
					<view class="">
						<image class="Card-bandID-box-img" src="../../../static/images/bankCardList/45813x.png" mode=""></image>
						<text class="Card-bandID-box-text">建设银行</text>
					</view>
					<view class="">
						<image class="Card-bandID-box-img1" src="../../../static/images/bankCardList/jiantou.png" mode=""></image>	
					</view>	
				</view>
				
				<view class="Card-bandID-box">
					<view class="">
						<image class="Card-bandID-box-img" src="../../../static/images/bankCardList/45903x.png" mode=""></image>
						<text class="Card-bandID-box-text">农行银行</text>
					</view>
					<view class="">
						<image class="Card-bandID-box-img1" src="../../../static/images/bankCardList/jiantou.png" mode=""></image>	
					</view>	
				</view>
				
				<view class="Card-bandID-box">
					<view class="">
						<image class="Card-bandID-box-img" src="../../../static/images/bankCardList/45913x.png" mode=""></image>
						<text class="Card-bandID-box-text">中国银行</text>
					</view>
					<view class="">
						<image class="Card-bandID-box-img1" src="../../../static/images/bankCardList/jiantou.png" mode=""></image>	
					</view>	
				</view>
				
				<view class="Card-bandID-box">
					<view class="">
						<image class="Card-bandID-box-img" src="../../../static/images/bankCardList/45923x.png" mode=""></image>
						<text class="Card-bandID-box-text">邮政银行</text>
					</view>
					<view class="">
						<image class="Card-bandID-box-img1" src="../../../static/images/bankCardList/jiantou.png" mode=""></image>	
					</view>	
				</view>
				
				<view class="Card-bandID-box">
					<view class="">
						<image class="Card-bandID-box-img" src="../../../static/images/bankCardList/45933x.png" mode=""></image>
						<text class="Card-bandID-box-text">浦发银行</text>
					</view>
					<view class="">
						<image class="Card-bandID-box-img1" src="../../../static/images/bankCardList/jiantou.png" mode=""></image>	
					</view>	
				</view>
			</view>
		</view>
		<view class="Card-buttom">
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	#app {
		width: 670rpx;
		margin: 0 auto;
		// background-color: #ccc;
		.header-add{
			margin-top: 72rpx;
			.header-text {
				color: #333333;
				font-size: 40rpx;
				font-weight: bolder;
				
			}
		}
		

		.header-info {
			margin-top: 24rpx;

			.header-infotext {
				font-size: 28rpx;
				color: #999999;
			}
		}

		.header-card {
			margin-top: 70rpx;
			display: flex;
			justify-content: space-between;

			.header-wrcard {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}
		}

		.header-inp {
			margin-top: 20rpx;

			.imp-input {
				height: 72rpx;
				border-bottom: 1rpx solid #aaa;
				background-image: url("../../../static/images/bankCardList/13773x.png");
				background-repeat: no-repeat;
				background-position: right;
				background-size: 34rpx 32rpx;
			}

			.imp-input::placeholder {
				font-size: 32rpx;
				color: #999999;
				margin: 20rpx 0rpx;
			}

		}

		.bankBtn {
			width: 100%;
			height: 88rpx;
			margin: 40rpx 0rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 88rpx;
			background-color: #007AFF;
			box-sizing: border-box;
		}
		.bindCard{
			border: 1rpx solid #C0C0C0;
			box-shadow: 0 0 5rpx 1rpx;
			margin-bottom: 40rpx;
			margin-top: 40rpx;
			.Card-text{
				margin-top: 20rpx;
				border-bottom: 1rpx solid #C0C0C0;
				.Card-blound{
					margin-top: 40rpx;
					.Card-blound-text{
						padding-left: 40rpx;
						font-size: 32rpx;
						color: #333333;
						font-weight: bold;
					}
				}
				.Card-cooperate{
					margin-top: 12rpx;
					margin-bottom: 30rpx;
					.Card-cooperate-text{
						padding-left: 40rpx;
						font-size: 28rpx;
						color: #999999;
					}
				}		
			}
			.Card-bandID{
				width: 590rpx;
				margin-left: 40rpx;
				margin-bottom: 40rpx;
				.Card-bandID-box{
					height: 120rpx;
					border-bottom: 1rpx solid #C0C0C0;
					line-height: 120rpx;
					display: flex;
					justify-content: space-between;
					.Card-bandID-box-img{
						width:34rpx;
						height: 32rpx;
						vertical-align: middle;
					}
					.Card-bandID-box-img1{
						width:50rpx;
						height: 50rpx;
						vertical-align: middle;
						color: black;
					}
					.Card-bandID-box-text{
						padding-left: 20rpx;
						vertical-align: middle;
					}
				}
				
			}
		}
		.Card-buttom{
			width: 300rpx;
			height: 10rpx;
			background-color: black;
			margin: 0 auto;
			border-radius: 10rpx;
		}

	}
</style>
